<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at
   http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->


<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <script src="lib/esl.js"></script>
    <script src="lib/config.js"></script>
    <script src="lib/facePrint.js"></script>
    <script src="lib/testHelper.js"></script>
    <script src="tooltipTestHelper.js"></script>
    <link rel="stylesheet" href="lib/reset.css"/>
</head>

<body>
<style>
    .test-title {
        background: #fff;
    }

    .test-chart {
        margin: 0 auto;
    }

</style>


<div id="main0"></div>

<div id="main1"></div>


<script>
    require([
        'echarts'
        // 'echarts/chart/bar',
        // 'echarts/component/polar',
        // 'zrender/vml/vml'
    ], function (echarts) {
        var base = +new Date(2016, 9, 3);
        var oneDay = 24 * 3600 * 1000;
        var valueBase = Math.random() * 300;
        var valueBase2 = Math.random() * 50;
        var data = [];
        var data2 = [];

        for (var i = 1; i < 10; i++) {
            var now = new Date(base += oneDay);
            var dayStr = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-');

            valueBase = Math.round((Math.random() - 0.5) * 20 + valueBase);
            valueBase <= 0 && (valueBase = Math.random() * 300);
            data.push([dayStr, valueBase]);

            valueBase2 = Math.round((Math.random() - 0.5) * 20 + valueBase2);
            valueBase2 <= 0 && (valueBase2 = Math.random() * 50);
            data2.push([dayStr, valueBase2]);
        }
        option = {
            animation: false,
            title: {
                left: 'center',
                text: '触屏 tooltip 和 dataZoom 示例',
                subtext: '"tootip" and "dataZoom" on mobile device',
            },
            legend: {
                top: 'bottom',
                data: ['意向']
            },
            tooltip: {
                alwaysShowContent: true,
                triggerOn: 'none',
                position: function (pt) {
                    return [pt[0], 130];
                }
            },
            toolbox: {
                left: 'center',
                itemSize: 25,
                top: 55,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {}
                }
            },
            xAxis: {
                type: 'time',
                // boundaryGap: [0, 0],
                axisPointer: {
                    value: '2016-10-7',
                    snap: true,
                    lineStyle: {
                        color: '#004E52',
                        opacity: 0.5,
                        width: 2
                    },
                    label: {
                        show: true,
                        formatter: function (params) {
                            return echarts.format.formatTime('yyyy-MM-dd', params.value);
                        },
                        backgroundColor: '#004E52'
                    },
                    handle: {
                        show: true,
                        color: '#004E52'
                    }
                },
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                axisTick: {
                    inside: true
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    inside: true,
                    formatter: '{value}\n'
                },
                z: 10
            },
            grid: {
                top: 110,
                left: 15,
                right: 15,
                height: 160
            },
            dataZoom: [{
                type: 'inside',
                throttle: 50
            }],
            series: [{
                name: '模拟数据',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                sampling: 'average',
                itemStyle: {
                    color: '#8ec6ad'
                },
                stack: 'a',
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#8ec6ad'
                    }, {
                        offset: 1,
                        color: '#ffe'
                    }])
                },
                data: data
            },
                {
                    name: '模拟数据',
                    type: 'line',
                    smooth: true,
                    stack: 'a',
                    symbol: 'circle',
                    symbolSize: 5,
                    sampling: 'average',
                    itemStyle: {
                        color: '#d68262'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#d68262'
                        }, {
                            offset: 1,
                            color: '#ffe'
                        }])
                    },
                    data: data2
                }

            ]
        };

        var chart = testHelper.create(echarts, 'main0', {
            option: option
        });
        chart.setOption(option, true);
        window.addEventListener('resize', function () {
            chart.resize();
        })
    });

</script>

<script>
    require([
        'echarts'
        // 'echarts/chart/bar',
        // 'echarts/component/polar',
        // 'zrender/vml/vml'
    ], function (echarts) {
        var base = +new Date(2016, 9, 3);
        var oneDay = 24 * 3600 * 1000;
        var valueBase = Math.random() * 300;
        var valueBase2 = Math.random() * 50;
        var data = [];
        var data2 = [];

        for (var i = 1; i < 10; i++) {
            var now = new Date(base += oneDay);
            var dayStr = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-');

            valueBase = Math.round((Math.random() - 0.5) * 20 + valueBase);
            valueBase <= 0 && (valueBase = Math.random() * 300);
            data.push([dayStr, valueBase]);

            valueBase2 = Math.round((Math.random() - 0.5) * 20 + valueBase2);
            valueBase2 <= 0 && (valueBase2 = Math.random() * 50);
            data2.push([dayStr, valueBase2]);
        }
        option = {
            animation: false,
            title: {
                left: 'center',
                text: '触屏 tooltip 和 dataZoom 示例',
                subtext: '"tootip" and "dataZoom" on mobile device',
            },
            legend: {
                top: 'bottom',
                data: ['意向']
            },
            tooltip: {
                alwaysShowContent: true,
                renderMode: 'richText',
                triggerOn: 'none',
                position: function (pt) {
                    return [pt[0], 130];
                }
            },
            toolbox: {
                left: 'center',
                itemSize: 25,
                top: 55,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {}
                }
            },
            xAxis: {
                type: 'time',
                // boundaryGap: [0, 0],
                axisPointer: {
                    value: '2016-10-7',
                    snap: true,
                    lineStyle: {
                        color: '#004E52',
                        opacity: 0.5,
                        width: 2
                    },
                    label: {
                        show: true,
                        formatter: function (params) {
                            return echarts.format.formatTime('yyyy-MM-dd', params.value);
                        },
                        backgroundColor: '#004E52'
                    },
                    handle: {
                        show: true,
                        color: '#004E52'
                    }
                },
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                axisTick: {
                    inside: true
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    inside: true,
                    formatter: '{value}\n'
                },
                z: 10
            },
            grid: {
                top: 110,
                left: 15,
                right: 15,
                height: 160
            },
            dataZoom: [{
                type: 'inside',
                throttle: 50
            }],
            series: [{
                name: '模拟数据',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                sampling: 'average',
                itemStyle: {
                    color: '#8ec6ad'
                },
                stack: 'a',
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#8ec6ad'
                    }, {
                        offset: 1,
                        color: '#ffe'
                    }])
                },
                data: data
            },
                {
                    name: '模拟数据',
                    type: 'line',
                    smooth: true,
                    stack: 'a',
                    symbol: 'circle',
                    symbolSize: 5,
                    sampling: 'average',
                    itemStyle: {
                        color: '#d68262'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#d68262'
                        }, {
                            offset: 1,
                            color: '#ffe'
                        }])
                    },
                    data: data2
                }

            ]
        };

        var chart = testHelper.create(echarts, 'main1', {
            option: option
        });
        chart.setOption(option, true);
        window.addEventListener('resize', function () {
            chart.resize();
        })
    });

</script>
</body>

</html>
